<template>
  <div>
    <h1>App</h1>
    <input type="text" ref="user" />
    <button @click="getUserMsg">点击获取用户输入的值</button>
    <Header ref="header"></Header>
    <button @click="getHeader">获取header组件实例</button>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  name: "App",
  components: {
    Header,
    Footer,
  },
  methods: {
    getUserMsg() {
      console.log(this);
      console.log(this.$refs.user.value);
    },
    getHeader() {
      //如果ref设置给组件 则我们通过$refs拿到的是组件实例
      //那么我们就可以操作组件实例上的人任何东西
      console.log(this);
      console.log(this.$refs.header.count++);
    },
  },
};
</script>

<style>
</style>
